<template>
  <div>
    <div class="order_topBar">
      <i class="el-icon-medal-1"></i>
      <span>我的订单</span>
      <empty-shopcart v-if="this.$store.state.userId==='' || productOrderList.length === 0" componentNameType="您的订单还是空的！"></empty-shopcart>
      <order-list-item v-else :orderList="productOrderList"></order-list-item>
    </div>
  </div>
</template>

<script>
  import {request} from "network/request";
  import EmptyShopcart from "components/shopcart/EmptyShopcart";
  import OrderListItem from "components/order/OrderListItem";
  export default {
    name: "productOrder",
    components:{
      EmptyShopcart,
      OrderListItem
    },
    data(){
      return{
        userId: '',
        productOrderList: [],
      }
    },

    created(){
      if(this.$store.state.userId !== null && this.$store.state.userId !== ""){
        this.userId = this.$store.state.userId;

        request({
          url: '/product-order/' + this.userId,
        }).then(res => {
            this.productOrderList = res.data.data;
          console.log(this.productOrderList);
        });
      }

    }
  }
</script>

<style scoped>
  .order_topBar{
    padding-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #E0E0E0;
    font-size: 20px;
  }
  .order_topBar span{
    margin-left: 10px;
  }
</style>
